<template>
  <PageContainer title="新增学院班级">
    <!-- 内容插槽 页面主元素的展示 -->
    <!-- 导入学院班级表单 status-icon显示校验反馈图标 rules绑定校验规则 -->
    <el-form :model="importDetail" status-icon :rules="rules" ref="importDetail" label-width="100px">
      <el-form-item label="新增类型" prop="identify">
        <el-radio-group v-model="importDetail.identify" size="medium">
          <el-radio border label="学院" /><el-radio border label="班级" />
        </el-radio-group>
      </el-form-item>

      <el-form-item label="学院号" prop="collegeId">
        <el-input type="text" v-model="importDetail.collegeId" autocomplete="off"
          :disabled="importDetail.identify === '学院' ? false : true" />
      </el-form-item>

      <!-- 导入学院只用展示 学院号 学院名 -->
      <div v-if="importDetail.identify == '学院'">
        <el-form-item label="学院名" prop="college">
          <el-input type="text" v-model="importDetail.college" autocomplete="off" />
        </el-form-item>
      </div>

      <!-- 导入班级需要额外展示 班级号 班级名 -->
      <div v-if="importDetail.identify == '班级'">
        <el-form-item label="学院名" prop="collegeId">
          <!-- 注意虽然是学院名 但传入的是学院id -->
          <CollegeSelect v-model="importDetail.collegeId" />
        </el-form-item>
        <el-form-item label="班级号" prop="majorId">
          <el-input type="text" v-model="importDetail.majorId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级名" prop="major">
          <el-input type="text" v-model="importDetail.major" autocomplete="off" />
        </el-form-item>
      </div>

      <el-form-item>
        <el-button type="primary" @click="submitForm('importDetail')">提交</el-button>
        <el-button @click="resetForm('importDetail')">重置</el-button>
      </el-form-item>
    </el-form>
  </PageContainer>
</template>

<script>
import { insertCollegeOrMajor } from '@/api/college'
import PageContainer from '@/components/PageContainer'
import CollegeSelect from '@/components/CollegeSelect'

export default {
  name: 'ImportCollegePage', // 导入学院和班级页面
  components: {
    PageContainer,
    CollegeSelect
  },
  data () {
    return {
      // 存放导入学院或班级的信息
      importDetail: {
        identify: '学院',
        collegeId: '',
        college: '',
        majorId: '',
        major: ''
      },
      // 设置对应的校验规则
      rules: {
        collegeId: [
          { required: true, message: '请输入学院号', trigger: 'blur' },
          { pattern: /^\d{4}$/, message: '学院号必须为4位数字', trigger: 'blur' }
        ],
        majorId: [
          { required: true, message: '请输入班级号', trigger: 'blur' },
          { pattern: /^\d{4}$/, message: '班级号必须为4位数字', trigger: 'blur' }
        ],
        college: [{ required: true, message: '请输入学院名', trigger: 'blur' }],
        major: [{ required: true, message: '请输入专业名', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 提交表单 发送请求
    submitForm (importDetail) {
      // 校验数据是否合法
      this.$refs[importDetail].validate(async (valid) => {
        if (valid) {
          await insertCollegeOrMajor(this.importDetail)
          this.$message.success('新增成功！')
          this.importDetail = { identify: '学院' } // 新增成功后清空表单
        }
      })
    },
    // 重置表单
    resetForm (importDetail) {
      this.$refs[importDetail].resetFields()
    }
  }
}
</script>

<style></style>
